<!-- @format -->

<template>
	<view>
		<uni-popup
			ref="popup"
			:type="position"
			:mask-click="false"
			@maskClick="_close"
			:safeArea="safeArea"
			backgroundColor="#fff">
			<view class="model-view">
				<view v-if="title && title.length > 0" class="model-title-view">
					<view :class="'model-title ' + (titleStyle ? 'title-center' : '')">{{
						title
					}}</view>
					<uni-icons
						v-if="closeable"
						type="closeempty"
						size="16"
						@click="_close"
						:data-spmCntSuffix="'.modelView@1.close@'"
						:data-custom="1"
						:data-spm="{'pos': 'close'}">
					</uni-icons>
				</view>
				<slot></slot>
				<!-- <scroll-view scroll-y enable-flex style="height: 500px" v-if="needScroll">
					<slot></slot>
				</scroll-view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: "popupWithClose",
	data() {
		return {}
	},

	props: {
		position: {
			type: String,
			value: "bottom",
		},
		title: {
			type: String,
			value: "",
		},
		titleStyle: {
			type: String,
		},
		closeable: {
			type: Boolean,
			value: false,
		},
		needScroll: {
			type: Boolean,
			value: false,
		},
		safeArea:{
			type: Boolean,
			value: false,
		}
	},

	methods: {
		_close() {
			this.$emit("close")
		},
	},
}
</script>

<style>
.model-view {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;
}
.model-title-view {
	display: flex;
	flex-direction: row;
	padding: 30rpx 33rpx 9rpx 30rpx;
	border-top: 1rpx solid #eeeeee;
	justify-content: space-between;
	align-items: center;
	color: #343434;
	margin-bottom: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
}
.model-title {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #343434;
}
.title-center {
	flex: 1;
	text-align: center;
}
</style>
